<template>
  <section>
    <label for="text-in"></label>
    <input type="text" id="text-in" autofocus="autofocus" placeholder="接下来做什么" @keyup.enter= "addHandler">
    <ul>
      <Item :todo = "todo" v-for = "todo in filterToDos" :key = 'todo.id' @delToDo = 'deleteToDo'></Item>
    </ul>
    <Tabs :filter='filter' :todos='todos' @toggle='toggle' @clrCompleted = 'clrCompleted'></Tabs>
  </section>
</template>

<script>
import Item from './item.vue'
import Tabs from './tabs.vue'
let id = 0
export default {
  data () {
    return {
      todos: [],
      filter: 'all'
    }
  },
  components: {
    Item,
    Tabs
  },
  computed: {
    filterToDos () {
      if (this.filter === 'all') {
        return this.todos
      }
      const completed = this.filter === 'completed';
      return this.todos.filter(todo => completed === todo.completed)
    }
  },
  methods: {
    addHandler (e) {
      this.todos.unshift({
        id: id++,
        content: e.target.value.trim(),
        completed: false
      })
      e.target.value = ''
    },
    deleteToDo (id) {
      this.todos.splice(this.todos.findIndex(todo => todo.id === id), 1)
    },
    toggle (state) {
      this.filter = state
    },
    clrCompleted () {
      this.todos = this.todos.filter(todo => !todo.completed)
    }
  }
}
</script>
<style lang= 'stylus' scoped>
section
  background-color white
  width 30%
  margin-left 35%
#text-in
  width 100%
  border .1rem solid gray
  font-size 1.8rem
  text-indent .6rem
  line-height 3rem
  height 3rem
  margin-bottom .6rem
ul
  list-style none
  padding-left .5rem
</style>